import { defineStore } from 'pinia'

interface ITab {
  path: string
  title: string
  active?: boolean // 是否激活项
}

const useTabsStore = defineStore('tabs', {
  state() {
    return {
      // 保存访问的所有路由标签数据
      tabs: [
        {
          path: '/dashboard',
          title: '仪表盘',
          active: true,
        },
      ],
    }
  },
  actions: {
    // 添加当前访问路由的标签数据
    addTab(tab: ITab) {
      // 将所有标签的激活字段设置为 false
      this.tabs = this.tabs.map(t => {
        t.active = false
        return t
      })

      // 查找数组中是否有当前的标签
      const has = this.tabs.find(t => t.path === tab.path)

      // 不存在当前标签，则添加到数组中，存在，则将其激活属性设置为 true
      if (!has) {
        this.tabs.push({
          ...tab,
          active: true,
        })
      } else {
        has.active = true
      }
    },
    // 移除指定路由的标签数据
    removeTab(tab: string) {
      /* 判断移除的是否为激活项 */
      const index = this.tabs.findIndex(curr => curr.path === tab)
      if (index === 0) {
        return
      }
      const isActive = this.tabs[index].active
      if (isActive) { // 是移除的激活项
        // 如果有后一项标签，则将后一项标签测试为激活状态，没有后一项标签，则将前一项设置为激活
        if (index >= this.tabs.length - 1) {
          this.tabs[index - 1].active = true
        } else {
          this.tabs[index + 1].active = true
        }
      }
      /* 删除标签 */
      this.tabs.splice(index, 1)
    },
    // 移除指定命令对应的标签
    removeByCommand(command: string) {
      switch(command) {
        case 'current': // 关闭当前标签页
          // 当前激活标签路径
          const activePath = this.tabs.find(tab => tab.active)?.path
          this.removeTab(activePath as string)
          break
        case 'other': // 关闭其它标签页
          this.tabs = this.tabs.filter((tab, index) => {
            if (index === 0) {
              return true
            }
            return tab.active
          })
          break
        case 'all': // 关闭所有标签页
          this.tabs.splice(1)
          this.tabs[0].active = true
          break
      }
    }
  },
  getters: {
    activeTabPath(): string {
      return this.tabs.find(tab => tab.active)?.path as string
    }
  },
  persist: {
    storage: sessionStorage,
  }
})

export default useTabsStore
